<template>
  <div class="task">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="form"
        >
          <el-form-item label="账号" prop="appointmentPhone">
            <el-input
              v-model="form.appointmentPhone"
              placeholder="账号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="专家" prop="doctor">
            <el-input
              v-model="form.doctor"
              placeholder="专家"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="经办人" prop="processor">
            <el-input
              v-model="form.processor"
              placeholder="经办人"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="服务器">
            <el-select v-model="form.server" placeholder="请选择服务器">
              <!-- 选择一级菜单 -->
              <el-option label="主服务器" value="0"></el-option>
              <el-option label="子服务器1" value="1"></el-option>
              <el-option label="子服务器2" value="2"></el-option>
              <el-option label="子服务器3" value="3"></el-option>
              <el-option label="子服务器4" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约日期">
              <el-date-picker placeholder="选择日期" v-model="form.appointmentDate"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="onReset"
            >重置
            </el-button>
            <el-button
              type="primary"
              :disabled="isLoading"
              @click="onSubmit"
            >查询</el-button>
          </el-form-item>
        </el-form>
        <el-button
          @click="$router.push({ name: 'mother-create' })"
        >创建任务</el-button>
        <el-button
          @click="copy()"
        >复制</el-button>
        <el-button
          @click="record()"
        >预约记录</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style=" width: 100%"
        @selection-change="handleSelectionChange" v-loading="isLoading">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="任务ID"
          width="70">
        </el-table-column>
        <el-table-column
          prop="appointmentPerson"
          label="预约人"
          width="70">
        </el-table-column>
        <el-table-column
          prop="hospitalCode"
          label="医院"
          width="160"
          :formatter="formatHospitalCode">
        </el-table-column>
        <el-table-column
          prop="campusCode"
          label="院区"
          width="80"
          :formatter="formatCampusCode">
        </el-table-column>
        <el-table-column
          prop="appointmentPhone"
          label="账号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="patientName"
          label="就诊人"
          width="70">
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="科室"
          width="200">
        </el-table-column>
        <el-table-column
          prop="docName"
          label="专家"
          width="70">
        </el-table-column>
        <el-table-column
          label="预约日期"
          width="130">=
          <template slot-scope="scope">{{ scope.row.appointmentDate | dateFormat}} {{scope.row.appointmentRange | rangeFormat}}</template>
        </el-table-column>
        <el-table-column
          label="就诊日期"
          width="130">=
          <template slot-scope="scope">{{ scope.row.treatmentDate | dateFormat}} {{scope.row.treatmentRange | rangeFormat}}</template>
        </el-table-column>
        <el-table-column
          prop="taskStatus"
          label="任务状态"
          width="100"
          :formatter="formatTaskStatus">
        </el-table-column>
        <el-table-column
          prop="status"
          label="执行方式"
          width="80"
          :formatter="formatStatus">
        </el-table-column>
        <el-table-column
          prop="server"
          label="服务器"
          width="80"
          :formatter="formatServer">
        </el-table-column>
        <el-table-column
          prop="customer"
          label="客户"
          width="80">
        </el-table-column>
        <el-table-column
          prop="processor"
          label="经办人"
          width="80">
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="130">
          <template slot-scope="scope">{{ scope.row.createTime | dateFormat}}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="360">
          <template slot-scope="scope">
            <el-button
              size="mini" v-if="scope.row.taskStatus===1"
              @click="handleEdit(scope.row)">配置</el-button>
            <el-button
              size="mini"
              @click="handleCheck(scope.row)">校验</el-button>
            <el-button
              size="mini" v-if="scope.row.status===0 && scope.row.taskStatus ===2"
              @click="selWeekScheduleTwo(scope.row)">获取排班</el-button>
            <el-button
              size="mini" v-if="scope.row.status===0 && (scope.row.taskStatus===4 || scope.row.taskStatus===6)"
              @click="getImageCode(scope.row)">获取验证码</el-button>
            <el-button
              size="mini" v-if="scope.row.status===0 && (scope.row.taskStatus===4 || scope.row.taskStatus===6)"
              @click="handleDo(scope.row)">发起预约</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件结构 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.current"
        :page-sizes="[10, 50, 100]"
        :page-size="form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :disabled="isLoading"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getTasksPages, copy, getImageCode, selWeekScheduleTwo, checkToken, sureAppointment } from '@/services/mother'
export default {
  name: 'TaskIndex',
  data () {
    return {
      tableData: [],
      form: {
        // 当前显示的页号
        current: 1,
        // 每页显示的数据条数
        size: 10,
        appointmentPhone: '',
        doctor: '',
        processor: '',
        server: '',
        appointmentDate: ''
      },
      // 数据总数
      totalCount: 0,
      isLoading: false,
      multipleSelection: [],
      check: false
    }
  },
  created () {
    this.loadAllMenus()
  },
  methods: {
    formatTaskStatus (row) {
      const status = row.taskStatus
      switch (status) {
        case 1:
          return '待配置'
        case 2:
          return '待获取排班'
        case 3:
          return '获取失败'
        case 4:
          return '待发起'
        case 5:
          return '预约成功'
        case 6:
          return '无记录'
        default:
          return ''
      }
    },
    formatHospitalCode (row) {
      const code = row.hospitalCode
      switch (code) {
        case 'HXD2':
          return '四川大学华西第二医院'
        case 'HXFYMS':
          return '四川省儿童医院'
        case 'MSFYBJ':
          return '眉山市妇幼保健院'
        default:
          return ''
      }
    },
    formatCampusCode (row) {
      const code = row.campusCode
      switch (code) {
        case '1':
          return '华西院区'
        case '2':
          return '锦江院区'
        default:
          return ''
      }
    },
    formatStatus (row) {
      const status = row.status
      switch (status) {
        case 0:
          return '手动'
        case 1:
          return '自动'
        default:
          return ''
      }
    },
    formatServer (row) {
      const server = row.server
      switch (server) {
        case 0:
          return '主服务器'
        case 1:
          return '子服务器1'
        case 2:
          return '子服务器2'
        case 3:
          return '子服务器3'
        case 4:
          return '子服务器4'
        default:
          return ''
      }
    },
    record () {
      if (this.multipleSelection.length === 0) {
        this.$message.info('请选择任务')
        return false
      } else if (this.multipleSelection.length === 1) {
        // 遍历数据
        for (const item of this.multipleSelection) {
          this.$router.push({
            name: 'mother-record',
            params: {
              id: item.id
            }
          })
        }
      } else {
        this.$message.error('只能选择一个任务')
        return false
      }
    },
    // 批量审核
    async copy () {
      if (this.multipleSelection.length === 0) {
        this.$message.info('请选择任务')
        return false
      } else if (this.multipleSelection.length === 1) {
        for (const item of this.multipleSelection) {
          const { data } = await checkToken(item.id)
          if (data.code === 400) {
            this.$message.error(data.msg)
          } else {
            this.$message.success(data.data)
            copy(item.id)
            this.$router.go(0)
          }
        }
      } else {
        this.$message.error('只能选择一个任务')
        return false
      }
    },
    async getImageCode (rowData) {
      const { data } = await getImageCode({
        id: rowData.id
      })
      if (data.code === 200) {
        this.$message.success('获取验证码成功')
      } else {
        this.$message.error('获取验证码失败')
      }
    },
    async selWeekScheduleTwo (rowData) {
      const { data } = await selWeekScheduleTwo({
        id: rowData.id,
        doctorId: rowData.doctorId
      })
      if (data.code === 200) {
        this.$message.success('获取排班成功')
        this.$router.go(0)
      } else {
        this.$message.error('获取排班失败')
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 重置按钮点击操作
    onReset () {
      this.$refs.form.resetFields()
    },
    async handleDo (rowData) {
      const { data } = await sureAppointment({ id: rowData.id })
      if (data.data != null) {
        this.$message.success('预约成功，请及时支付')
      } else {
        this.$message.error('请及时获取验证码')
      }
    },
    async handleCheck (rowData) {
      const { data } = await checkToken(rowData.id)
      if (data.code === 400) {
        this.$message.error(data.msg)
      } else {
        this.$message.success(data.data)
      }
    },
    // 提交筛选功能
    onSubmit () {
      // 请求数据前，将请求的页数更新为 1
      this.form.current = 1
      this.loadAllMenus()
    },
    // 获取所有菜单信息
    async loadAllMenus () {
      this.isLoading = true
      const { data } = await getTasksPages({
        pageSize: this.form.size,
        pageNum: this.form.current,
        appointmentPhone: this.form.appointmentPhone,
        doctor: this.form.doctor,
        processor: this.form.processor,
        server: this.form.server,
        appointmentDate: this.form.appointmentDate
      })
      if (data.code === 200) {
        this.tableData = data.data.list
        this.totalCount = data.data.total
        this.isLoading = false
      }
    },
    // 每页显示条数变化时触发
    handleSizeChange (val) {
      this.form.size = val
      // 由于修改了每页显示的条数，应当将页数还原为默认值 1
      this.form.current = 1
      this.loadAllMenus()
    },
    // 页号改变触发
    handleCurrentChange (val) {
      this.form.current = val
      this.loadAllMenus()
    },
    handleEdit (rowData) {
      // 设置跳转
      this.$router.push({
        name: 'mother-config',
        params: {
          id: rowData.id
        }
      })
    }
  },
  filters: {
    // 日期过滤器
    dateFormat (date) {
      if (date === null) {
        return null
      }
      date = new Date(date)
      return `
        ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
      `
    },
    rangeFormat (value) {
      if (value === null) {
        return null
      } else if (value === 0) {
        return '上午'
      } else if (value === 1) {
        return '下午'
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
